<script setup lang="ts">
export interface InfoGridItem { label: string, value: string, color?: string, showTag?: boolean }

const props = defineProps<{
  info: Array<InfoGridItem>
}>()
</script>

<template>
  <view class="grid grid-cols-2" gap-36rpx>
    <view v-for="item in props.info" :key="item.label" class="flex items-baseline flex-nowrap text-28rpx leading-28rpx">
      <text class="flex-shrink-0 text-tertiary text-nowrap">
        {{ `${item.label}:` }}
      </text>
      <Spacer width="6" />
      <text class="flex-1 text-primary text-ellipsis whitespace-nowrap" :style="{ color: item.color || '', flex: item.showTag ? '0' : '1' }">
        {{ item.value }}
      </text>
      <Spacer width="6" />
      <text v-if="item.showTag" class="flex-shrink-0 text-white text-24rpx leading-24rpx px-22rpx py-5rpx bg-brand rounded-full">
        业主
      </text>
    </view>
  </view>
</template>
